<template>
  <div class="agent-code-wrapper">
    <div class="noise"></div>

    <header class="hero">
      <h1 class="title">代码解释器</h1>
      <p class="subtitle">面向代码的对话式分析与执行</p>
    </header>

    <div class="terminal-card">
      <div class="terminal-header">
        <span class="dot red"></span>
        <span class="dot yellow"></span>
        <span class="dot green"></span>
        <span class="path">workspace</span>
      </div>
      <iframe
 src="http://11.73.23.232/chatbot/JPQ3lCME260W0vp6"
 style="width: 100%; height: 100%; min-height: 860px"
 frameborder="0"
 allow="microphone">
      </iframe>
      <div class="watermark-mask"><span class="mask-text">代码助手</span></div>
    </div>

    <ul class="tips">
      <li>示例：解释这段正则 /\b\w{3,5}\b/ 的含义。</li>
      <li>示例：把下方 Python 片段改写为等价的 JavaScript。</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'LGB_AgentCode'
}
</script>

<style scoped>
.agent-code-wrapper {
  padding: 40px 20px 32px;
  min-height: calc(100vh - 50px);
  box-sizing: border-box;
  color: #e5e7eb;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(94,234,212,0.08) 0%, rgba(0,0,0,0) 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(147,197,253,0.08) 0%, rgba(0,0,0,0) 60%),
              linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
  position: relative;
}

.noise { position:absolute; inset:0; pointer-events:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="160" height="160" filter="url(%23n)" opacity="0.03"/></svg>'); background-size:160px 160px; }

.hero { text-align: center; margin-bottom: 24px; }
.title { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: .4px; }
.subtitle { margin: 0; color: #94a3b8; }

.terminal-card {
  width: 1100px;
  max-width: 94vw;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1020;
  border: 1px solid rgba(148,163,184,0.18);
  box-shadow: 0 20px 40px rgba(2,6,23,.45), 0 10px 20px rgba(2,6,23,.35);
  position: relative;
}

.terminal-header {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: linear-gradient(180deg, #0f1a34 0%, #0b1020 100%);
  border-bottom: 1px solid rgba(148,163,184,0.12);
}
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.red { background:#ef4444; }
.yellow { background:#f59e0b; }
.green { background:#22c55e; }
.path { margin-left: 8px; font-size: 12px; color:#9ca3af; }

/* 遮挡 iframe 右上角水印 */
.watermark-mask {
  position: absolute;
  right: 0;
  top: 40px;
  width: 240px;
  height: 56px;
  background: rgba(248, 250, 252, 0.85);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
  z-index: 2;
  border-bottom-left-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mask-text { font-size: 16px; color: #64748b; font-weight: 700; letter-spacing: 1.5px; }

.tips { list-style: none; padding: 12px 0 0; margin: 12px 0 0; color: #94a3b8; font-size: 13px; text-align:center; }
.tips li { margin: 4px 0; }
</style>


